<template>
  <div>
    <h1>测试vue-draggable</h1>

    <div>{{ drag ? "拖拽中" : "拖拽停止" }}</div>
    <!--使用draggable组件-->
    <div class="dragWrap">
      <draggable
        v-model="myArray"
        chosenClass="chosen"
        forceFallback="true"
        group="people"
        animation="500"
        @start="onStart"
        @end="onEnd"
      >
        <transition-group>
          <div class="item" v-for="element in myArray" :key="element.id">
            <img
              :src="element.src"
              @mouseenter="element.flag = true"
              @mouseleave="element.flag = false"
              style="width: 200px; height: 150px"
            />
            <div v-show="element.flag" @mouseenter="element.flag = true" style="width: 200px; height: 50px">
              <i class="el-icon-zoom-in"></i>
              <i class="el-icon-delete"></i>
            </div>
          </div>
        </transition-group>
      </draggable>
    </div>
  </div>
</template>
<style scoped>
/*被拖拽对象的样式*/
.item {
  background-color: #fdfdfd;
  border: solid 1px #eee;
  position: relative;
  width: 200px;
  height: 150px;
}
.item img {
  cursor: move;
}

.item div {
  padding-top: 20px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  /* filter: blur(1px); */
}
.item div i {
  font-size: 32px;
  color: #fff;
}

.dragWrap {
  width: 600px;
  height: 600px;
  background: red;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}

/*选中样式*/
.chosen {
  border: solid 2px #3089dc !important;
}
</style>
<script>
//导入draggable组件
import draggable from "vuedraggable";
export default {
  //注册draggable组件
  components: {
    draggable,
  },
  data() {
    return {
      drag: false,
      //定义要被拖拽对象的数组
      myArray: [
        {
          people: "cn",
          id: 1,
          name: "www.itxst.com",
          src: "https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF",
          flag: false,
        },
        {
          people: "cn",
          id: 2,
          name: "www.baidu.com",
          src: "https://img1.baidu.com/it/u=638159551,1901728755&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
          flag: false,
        },
        {
          people: "cn",
          id: 3,
          name: "www.taobao.com",
          src: "https://img2.baidu.com/it/u=2566230917,2808117782&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
          flag: false,
        },
        {
          people: "us",
          id: 4,
          name: "www.google.com",
          src: "https://img1.baidu.com/it/u=64973888,900032715&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
          flag: false,
        },
      ],
    };
  },
  methods: {
    //开始拖拽事件
    onStart(e) {
      this.drag = true;
      console.log(e, "开始拖拽的事件对象");
    },
    //拖拽结束事件
    onEnd(e) {
      this.drag = false;
      console.log(e, "结束拖拽的事件对象");
      console.log(this.myArray, "拖拽后绑定的list");
    },
  },
};
</script>
